<template>
  <div class="experience">
    <h1>职业经历</h1>
    
    <div class="timeline">
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">1993年</div>
        <div class="timeline-content">
          <h3>加入华为</h3>
          <p>担任公司最底层的一名技术员，成为华为第一代数字程控交换机的开发人员，参与交换机C&C08的研发。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">1997年</div>
        <div class="timeline-content">
          <h3>GSM产品研发</h3>
          <p>余承东和他的团队推出华为的主力GSM产品，开始进入国内市场。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">1998年</div>
        <div class="timeline-content">
          <h3>参与3G国际标准制定</h3>
          <p>参与制定3G国际标准，成为标准制定组织成员和主要贡献者之一。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">2008年</div>
        <div class="timeline-content">
          <h3>第四代基站研发</h3>
          <p>带领团队研发出第四代基站，当时的基站要插板，爱立信插12块板，华为只需插3块，从而奠定华为无线的优势地位。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">2008年</div>
        <div class="timeline-content">
          <h3>担任华为公司欧洲区总裁</h3>
          <p>确定"压强原则"，选定最强的国家、最好的价值客户"5大国TOP3"运营商，进行战略性投入。三年之后，15个重点运营商被余承东成功攻破12个。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">2010年</div>
        <div class="timeline-content">
          <h3>调任终端业务</h3>
          <p>从无线产品线调至终端业务。实现三个转变：从传统B2B业务模式转向B2C模式、从OBM白牌转向华为自身品牌、从低端产品扩展到中高端领域。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">2012年</div>
        <div class="timeline-content">
          <h3>接手华为终端业务</h3>
          <p>舍弃给运营商做贴牌手机的业务，坚持做华为的自主品牌。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">2017年</div>
        <div class="timeline-content">
          <h3>中国互联网大会</h3>
          <p>发表《打造智慧互联网时代的极致体验》主题演讲，分享在移动互联网时代里华为在改善消费者体验方面的重要举措。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">2019年</div>
        <div class="timeline-content">
          <h3>应对美国制裁</h3>
          <p>美国宣布将华为及其子公司列入出口管制的"实体名单"，在余承东和华为团队的努力下，华为Mate手机时隔两年之后重新回归。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">2019年</div>
        <div class="timeline-content">
          <h3>进军汽车市场</h3>
          <p>带领华为进军汽车市场。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">2020年</div>
        <div class="timeline-content">
          <h3>麒麟芯片与鸿蒙系统</h3>
          <p>在中国信息化百人会2020年峰会上表示，华为Mate40将成为搭载高端麒麟芯片的"绝版"机，鸿蒙OS已经应用到华为智慧屏、华为手表上。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">2023年</div>
        <div class="timeline-content">
          <h3>转任汽车BU董事长</h3>
          <p>华为宣布，余承东转任汽车BU董事长，并在秋季全场景新品发布会上发布智界S7和问界M9等车型。</p>
        </div>
      </div>
      
      <div class="timeline-item">
        <div class="timeline-dot"></div>
        <div class="timeline-date">2025年</div>
        <div class="timeline-content">
          <h3>鸿蒙生态发展</h3>
          <p>华为终端BG董事长余承东官宣，原生鸿蒙正式版上线，鸿蒙原生应用和元服务上架突破20000个。</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
// Experience component logic
</script>

<style scoped>
.experience {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
}

h1 {
  margin-bottom: 3rem;
  text-align: center;
  color: #1a1a1a;
}

.timeline {
  position: relative;
  padding: 2rem 0;
}

.timeline::before {
  content: '';
  position: absolute;
  top: 0;
  left: 140px;
  height: 100%;
  width: 4px;
  background-color: #e9ecef;
}

.timeline-item {
  position: relative;
  margin-bottom: 2.5rem;
  margin-left: 160px;
}

.timeline-dot {
  position: absolute;
  left: -26px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #007bff;
  border: 4px solid #fff;
  box-shadow: 0 0 0 2px #cfe2ff;
  transform: translateY(8px);
  z-index: 1;
}

.timeline-date {
  position: absolute;
  left: -160px;
  width: 120px;
  text-align: right;
  font-weight: bold;
  color: #495057;
}

.timeline-content {
  background-color: #fff;
  padding: 1.5rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.timeline-content h3 {
  margin-bottom: 0.75rem;
  color: #1a1a1a;
}

.timeline-content p {
  color: #495057;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .timeline::before {
    left: 16px;
  }
  
  .timeline-item {
    margin-left: 40px;
  }
  
  .timeline-date {
    position: relative;
    left: 0;
    top: 0;
    width: auto;
    text-align: left;
    margin-bottom: 0.5rem;
    display: block;
  }
  
  .timeline-dot {
    left: -30px;
  }
}
</style>
